<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DH-Blog管理系统</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/layui/css/layui.css" />
		<style type="text/css">
			@keyframes start {
				from{opacity: 0;}
				to{opacity: 1;}
			}
			
			.container {
				width: 100%;
				height: 100%;
				display: flex;
				animation: start 2.2s;
			}

			.row {
				align-self: center;
				width: 1000px;
				height: 500px;
				margin: 0 auto;
				display: flex;
				border-radius: 4px;
				overflow: hidden;
			}

			.row>div {
				flex: 1;
				flex-direction: column;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.show {
				background-color: rgba(14, 108, 255, .9);
				color: #fff;
				font-weight: 700;
				font-size: 36px;
			}

			.show>img {
				width: 180px;
				border-radius: 50%;
			}


			.login {
				background-color: rgba(255, 255, 255, .9);

			}

			.login>form {
				width: 300px;
				height: 300px;
				text-align: center;
				display: flex;
				position: relative;
				flex-direction: column;
				justify-content: space-around;
			}

			.form-title {
				font-size: 24px;
				letter-spacing: 4px;
				/* margin-bottom: 20px; */
			}

			.login>form>div>input {
				/* margin: 10px; */
				height: 50px;
				font-size: 16px;
				padding-left: 34px;
				border-radius: 4px;
			}

			.login>form>div>.layui-icon {
				position: absolute;
				left: 14px;
				top: 95px;
				color: rgb(136, 154, 164);
			}

			.layui-icon-password {
				top: 178px !important;
			}

			.form-btn {
				width: 100%;
				height: 40px;
				letter-spacing: 2px;
				border-radius: 4px;
				/* margin-top: 20px; */
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="show">
					<img src="img/logo.jpg">
					<p>DH-Blog管理系统</p>
				</div>
				<div class="login">
					<form action="./pages/index.html" class="layui-form">
						<div class="form-title">用户登录</div>
						<div>
							<i class="layui-icon layui-icon-username"></i>
							<input type="text" name="title" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
						</div>
						<div>
							<i class="layui-icon layui-icon-password"></i>
							<input type="password" name="title" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
						</div>
						<button class="layui-btn layui-btn-normal form-btn layui-icon" lay-submit lay-filter="formDemo">登录</button>
					</form>
				</div>
			</div>
		</div>





		<canvas id="canvas" style="background: #111"></canvas>
		<style type="text/css">
			#canvas {
				z-index: -999;
				position: fixed;
				top: 0;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var context = canvas.getContext("2d");
				var W = window.innerWidth;
				var H = window.innerHeight;
				canvas.width = W;
				canvas.height = H;
				var fontSize = 24;
				var colunms = Math.floor(W / fontSize);
				var drops = [];
				for (var i = 0; i < colunms; i++) {
					drops.push(0);
				}
				var str = "春归花不落，风静月长明";

				function draw() {
					context.fillStyle = "rgba(14,108,255,.05)";
					context.fillRect(0, 0, W, H);
					context.font = "700 " + fontSize + "px 微软雅黑"
					context.fillStyle = "#f2f2f2";
					for (var i = 0; i < colunms; i++) {
						var index = Math.floor(Math.random() * str.length);
						var x = i * fontSize;
						var y = drops[i] * fontSize;
						context.fillText(str[index], x, y);
						if (y >= canvas.height && Math.random() > 0.99) {
							drops[i] = 0;
						}
						drops[i]++;
					}
				};

				function randColor() {
					var r = Math.floor(Math.random() * 256);
					var g = Math.floor(Math.random() * 256);
					var b = Math.floor(Math.random() * 256);
					return "rgb(" + r + "," + g + "," + b + ")";
				}
				draw();
				setInterval(draw, 30);
			};
		</script>
	</body>
</html>
